<template>
  <PageListContainer>
    <div class="base-block">
      <k-search :model="state.params" @search="methods.onSearch" @reset="methods.onReset">
        <el-form-item label="讲师搜索">
          <el-input v-model="state.params.keyword" clearable placeholder="请输入讲师账号名、手机号" style="width: 200px" />
        </el-form-item>
        <el-form-item label="跟进人">
          <el-input v-model="state.params.follower" clearable placeholder="请输入跟进人名称" />
        </el-form-item>
        <el-form-item label="加入时间">
          <el-date-picker
            v-model="state.params._dateRange"
            type="daterange"
            format="YYYY-MM-DD"
            value-format="YYYYMMDD"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="dateShortcut"
            @change="methods.onSearch"
          />
        </el-form-item>
      </k-search>
    </div>
    <div class="base-block">
      <KToolbar>
        <el-button type="primary" @click="onClickAdd">新增讲师</el-button>
      </KToolbar>

      <KTable v-bind="tableState" v-on="tableEvent">
        <template #actions="s">
          <el-link type="primary" @click="onClickEdit(s.row)">编辑</el-link>
        </template>
      </KTable>
    </div>
    <!-- 编辑 -->
    <AddEditModal ref="addEditModal" @success="methods.onSearch" />
  </PageListContainer>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useTableList } from './hooks/use-table';
import AddEditModal from './components/add-edit-modal.vue';
import { AuthCode, hasPermission } from '@/modules/auth';
import { toolGetDateRangeShorcuts as dateShortcut } from '@/utils';

defineOptions({ name: 'AgencyLecturerLecturerList' });
const { state, tableState, tableEvent, ...methods } = useTableList({});

// 新增
const addEditModal = ref();
const onClickAdd = () => {
  if (hasPermission(AuthCode.AGENCY_LECTURER_CREATE)) {
    addEditModal.value.show(0);
  }
};
// 编辑
const onClickEdit = (row: any) => {
  if (hasPermission(AuthCode.AGENCY_LECTURER_UPDATE)) {
    addEditModal.value.show(1, row);
  }
};
</script>
